<!--查看聚会明细-->
<template>
  <f7-page no-toolbar @page:beforeremove="onPageBeforeRemove">
    <f7-navbar back-link title="2019新年第一波自驾游" class="text-align-left">
      <f7-link class="right" icon-f7="share" ></f7-link>
    </f7-navbar>

    <f7-swiper style="height: 180px;" pagination>
      <f7-swiper-slide><img @click="onClick()" src="http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg">
      </f7-swiper-slide>
      <f7-swiper-slide><img @click="onClick()" src="http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg">
      </f7-swiper-slide>
      <f7-swiper-slide><img @click="onClick()"
                            src="http://img2.imgtn.bdimg.com/it/u=2097124721,3074829049&fm=26&gp=0.jpg">
      </f7-swiper-slide>
    </f7-swiper>

    <f7-block class="margin-top">
      <!--<f7-icon ios="f7:time" aurora="f7:time" md="material:time"></f7-icon>-->
      <p>2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波</p>
      <p><f7-icon f7="time" size="18px" class="padding-right"/>2019-01-20 周日 15:00-18:00</p>
      <p><f7-icon f7="money_yen_round" size="18px" class="padding-right"/>预计:120元<span style="font-size: 13px;margin-left: 12px;color: #007aff;">(入群后聚聚团长将发起群收款)</span></p>
      <p><f7-icon f7="placemark_fill" size="18px" class="padding-right"/>广东深圳南山区海岸城广场集合</p>
    </f7-block>
    <f7-list style="margin-top: -20px;" media-list>
      <!--如果是公司组织，则展示公司组织信息-->
      <f7-list-item mediaItem chevron-center
                    link="#"
                    @click="$refs.actionsOneGroup.open()"
                    title="大卫david"
                    subtitle="落情不是无情物，欢迎大家参加我的聚会！">
        <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" width="50" style="border-radius: 50%;"/>
      </f7-list-item>
    </f7-list>
    <f7-block style="margin-top: -20px;">
      <p>这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
      </p>
    </f7-block>

    <f7-toolbar bottom style="text-align: center;">
     <!-- <f7-button style="color: white;margin-left: 5%;width: 25%;" class="col button button-fill button-round">收藏
      </f7-button>-->
      <f7-link icon-f7="heart" target="_blank" text="收藏" ></f7-link> <!--heart_fill-->
      <f7-link icon-f7="persons" href="/member/alreadyMember/" target="_blank" text="已报人数"></f7-link>
      <f7-button style="color: white;margin-right:1%;width: 50%;" href="/activity/actSubmitSuccess/"
                 class="col button button-fill button-round">立即报名
      </f7-button>
    </f7-toolbar>

    <!--浮动按钮-->
    <f7-fab position="right-bottom" slot="fixed" color="orange">
      <f7-icon ios="f7:videocam" aurora="f7:videocam" md="material:videocam"></f7-icon>
      <f7-icon ios="f7:close" aurora="f7:close" md="material:close"></f7-icon>
      <f7-fab-buttons position="top">
        <f7-fab-button class="bg-color-blue" href="/activity/playbackActView/" label="往期花絮">H</f7-fab-button>
        <f7-fab-button class="bg-color-green" href="/member/alreadyMember/" label="参与人员">P</f7-fab-button>
      </f7-fab-buttons>
    </f7-fab>

    <!--已报人数列表-->
<!--    <f7-popup id="alreadyPeople" :opened="popupOpened" @popup:closed="popupOpened = false">
      <f7-page>
        <f7-navbar title="已报人数" @back-click="closeAlreadyPeople">
          <f7-nav-right>
            <f7-link popup-close>close</f7-link>
          </f7-nav-right>
        </f7-navbar>
        <f7-list media-list style="margin-top: 0px;">
          <f7-list-item mediaItem chevron-center v-for="(item, index) in items" :key="index"
                        link="#"
                        @click="$f7router.navigate('/member/memberView/')"
                        title="大卫david222"
                        subtitle="落情不是无情物，欢迎大家参加我的聚会！">
            <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" width="60" style="border-radius: 50%;"/>
          </f7-list-item>
        </f7-list>

      </f7-page>
    </f7-popup>-->

    <!-- 查看组织者 -->
    <f7-actions ref="actionsOneGroup">
      <f7-actions-group>
        <f7-actions-button>关注TA</f7-actions-button>
        <f7-actions-button @click="$f7router.navigate('/member/memberView/')">TA的首页</f7-actions-button>
        <f7-actions-button color="red">取消</f7-actions-button>
      </f7-actions-group>
    </f7-actions>

  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        allowInfinite: true,
        showPreloader: true,
        popupOpened: false,
      };
    },
    methods: {
      onPageBeforeRemove() {
        const self = this;
        // Destroy popup when page removed
        if (self.popup) self.popup.destroy();
      },
      closeAlreadyPeople() {
        console.log("close popup");
        this.popupOpened = false;
      }
    },
  };
</script>
<style scoped>
  .test-content {
    margin: 0px;
  }
</style>
